<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tcp控制台</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html, body {
      width: 100%;
      overflow-x: hidden;
    }
    .online-devices-wrap {
      margin: 10px 0;
    }
    .message-content {
      padding: 20px;
    }
    .message-content .col-sm {
      padding: 10px;
    }
    .message-content h4 {
      text-align: center;
    }
    .list-group-item {
      word-break: break-all;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <h2>控制台</h2>
      <div class="alert alert-primary" role="alert">
        mac地址：7B0002A201A57D
      </div>
      <div class="form-inline">
        <div class="form-group">
          <input type="text" class="form-control" id="mac" v-model="macAddress" aria-describedby="mac" placeholder="请输入mac地址">
        </div>
        <div class="form-group mx-sm-3">
          <input type="text" class="form-control" id="dic" v-model="dic" aria-describedby="dic" placeholder="请输入指令">
        </div>
        <button @click="handleGetMac" type="submit" class="btn btn-primary">发送指令</button>
      </div>
      <div class="alert alert-success online-devices-wrap" role="alert">
        在线设备：{{ onlineDevice }} 
      </div>
    </div>
    <div class="row message-content">
      <div class="col-sm">
        <h4>实时消息</h4>
        <ul class="list-group">
          <li class="list-group-item" v-for="item in realtimeMessage">{{ item }}</li>
        </ul>
      </div>
      <div class="col-sm">
        <h4>客户端连接消息</h4>
        <ul class="list-group">
          <li class="list-group-item" v-for="item in clientMessages">{{ item }}</li>
        </ul>
      </div>
      <div class="col-sm">
        <h4>断开消息</h4>
        <ul class="list-group">
          <li class="list-group-item" v-for="item in closeMessages">{{ item }}</li>
        </ul>
      </div>
      <div class="col-sm">
        <h4>错误消息</h4>
        <ul class="list-group">
          <li class="list-group-item" v-for="item in errorMessages">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
  <script>

    new Vue({
      el: '#app',
      data: {
        clientMessages: [],
        closeMessages: [],
        errorMessages: [],
        realtimeMessage: [], // 实时接收到到消息
        macAddress: '',
        dic: '', // 指令
        onlineDevice: '', // 在线设备
      },
      mounted() {
        var socket = new WebSocket('ws://47.114.179.84:3000/tcp/watch');
        // var socket = new WebSocket('ws://127.0.0.1:3000/tcp/watch');
        socket.addEventListener('open', function (event) {
          console.log('socket is open')
        });
        socket.addEventListener('message', (event) => {
          const data = JSON.parse(event.data);
          const type = data.type;
          const msg = data.msg;
          if (type === 'connected') {
            this.clientMessages.unshift(msg);
            this.clientMessages = this.beautyMessage(this.clientMessages);
          } else if (type === 'onlineDevice') {
            this.onlineDevice = msg;
          } else if (type == 'close') {
            this.closeMessages.unshift(msg);
            this.closeMessages = this.beautyMessage(this.closeMessages);
          } else if (type === 'error') {
            this.errorMessages.unshift(msg);
            this.errorMessages = this.beautyMessage(this.errorMessages);
          } else if (type === 'realtime') {
            this.realtimeMessage.unshift(msg);
            this.realtimeMessage = this.beautyMessage(this.realtimeMessage);
          }
        });
      },
      methods: {
        beautyMessage(list) {
          return Array.from(new Set(list.slice(0, 12)));
        },
        handleGetMac() {
          if (this.macAddress) {
            $.get(`/sendDic?dist=${this.macAddress}&dic=${this.dic}`, function(data) {
              console.log(data);
            })
          }
        }
      },
    })

    
  </script>
</body>
</html>